<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 使用了再全局注册的自定义组件 -->
      <Pagetools>
        <!-- 使用了具名插槽 -->
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>

        <template #right>
          <el-button type="success" size="small" @click="handleDownload()">
            普通Excel导出
          </el-button>
          <el-button type="warning" size="small">复杂Excel导出</el-button>
          <el-button
            type="primary"
            size="small"
            @click="$router.push('/import?type=user')"
          >
            Excel导入
          </el-button>
          <el-button type="primary" size="small" @click="addUser">
            新增员工
          </el-button>
        </template>
      </Pagetools>
      <el-card style="margin-top: 10px">
        <el-table v-loading="loading" border :data="list">
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            sortable=""
          />
          <!-- prop 对应列内容的字段名，也可以使用 property 属性 -->
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="头像" prop="staffPhoto" sortable="">
            <template #default="{ row }">
              <!-- src 里面或检测不到图片失败的情况 staffPhoto 有可能是 空字符串 -->
              <!-- v-imgerr 处理的是 图片有地址 但是地址加载失败的情况 -->
              <img
                v-imgerror="defalutImg"
                :src="row.staffPhoto || defalutImg"
                alt=""
                class="staffPhoto"
                @click="showDialogCodeFn(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <!-- formatter属性 用来格式化内容  方法是是一个function 函数 -->
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
            :formatter="formOfEmploymentEmploymentFn"
            sortable=""
          />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <!-- 通过作用域插槽 来拿table 内部的数据 -->
            <template #default="{ row }">
              {{ row.timeOfEntry | formatTime('YYYY年MM月DD日') }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                :disabled="!rolesBtn('USER_DEIT')"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >
                查看
              </el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button
                type="text"
                size="small"
                @click="RoleshowDialog(row.id)"
              >
                角色
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="!rolesBtn('USER_DEL')"
                @click="delUserItem(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :current-page="page"
            :page-sizes="[5, 10, 15, 25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-count="total * 0"
            @size-change="handleSizeChange"
            @current-change="currentChange"
          />
        </div>
      </el-card>
      <!-- 通过.sync 修饰符 子组件配合固定写法 showDialog 可以直接修改父组件的数据
      在对一个 prop 进行“双向绑定,单向修改”的场景下，
      因为子组件不能直接修改父组件，sync在2.3版本引入，
      作为一个事件绑定语法糖，利用EventBus，当子组件触发事件时，
      、?父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容 -->
      <add-employee-vue :show-dialog.sync="showDialog" />
      <el-dialog
        title="预览二维码"
        :visible="showDialogCode"
        @close="showDialogCode = false"
      >
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>
      <assign-role :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
    </div>
  </div>
</template>
<script>
import { delEmployee, getEmployeeListApi } from '@/api/employees'
import obj from '@/api/constant/employees' // 引入了一个常量文件
import addEmployeeVue from './component/add-employee.vue'
// import { formatTime } from '@/filter/index'
import defalutImg from '@/assets/common/user-filling.png' // 引入默认图片
import { formatTime } from '@/filter'
import QRCode from 'qrcode' // 导入生成二维码插件
import AssignRole from './component/assign-role.vue'
import mixin from '@/mixin' // 混入
import rolesMixin from '@/mixin/rolesMixin'
export default {
  components: {
    addEmployeeVue,
    AssignRole
  },

  mixins: [mixin, rolesMixin],
  data() {
    return {
      title: '11',
      userId: '',
      showRoleDialog: false,
      showDialogCode: false,
      defalutImg: defalutImg,
      list: [], // 返回的数据
      page: 1, // 当前页
      pageSize: 5, // 每页条数
      total: 0, // 总数
      loading: false,
      showDialog: false
    }
  },
  created() {
    this.getUserList()
    // console.log(this.$store.getters.roles)
    this.zhangsan()
    console.log('789')
    console.log(this.title)
  },
  methods: {
    // delUserItem(id) {},
    // zhangsan() {
    //   console.log('我是张四要混入李四')
    // },
    // rolesBtn(key) {
    //   return this.$store.getters.roles.points.includes(key)
    // },
    async getUserList() {
      this.loading = true
      const { data } = await getEmployeeListApi(this.page, this.pageSize)
      const { total, rows } = data

      this.total = total

      this.list = rows
      this.loading = false
    },
    // 修改了每页条数后, 会造成页数的变化, 推荐从第一页重新开始展示
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 更新每页条数
      this.pageSize = val
      // 重置当前页
      this.page = 1
      // 调用方法, 重新请求
      this.getUserList()
    },
    // 目标页码切换渲染新一页的数据
    currentChange(val) {
      // 获取现在的页码
      this.page = val
      // 重新获取新的数据
      this.getUserList()
    },
    // 处理序号问题 根据index的变化 进
    indexMethod(index) {
      // 当前返回的序号 前面有多少条数据
      // 前面一共有多少条数据 前面的多少页 * 每页的数据的条数 + index +1
      return (this.page - 1) * this.pageSize + index + 1
    }, // 处理员工数据格式化问题
    // row 整行的数据信息 column列的数据信息 cellValue 当前的数据
    formOfEmploymentEmploymentFn(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // 方法1
      // if (cellValue === 1) {
      //   return '正式'
      // } else if (cellValue === 2) {
      //   return '非正式'
      // } else {
      //   return '未知'
      // }
      // 常量抽离，将用于判断的表示 抽离到常量模块  常量就是可以遍历 可以枚举的数据
      const { hireType } = obj // 结构赋值
      // find 查到到符合的元素并且返回
      const result = hireType.find((item) => item.id === +cellValue)
      return result ? result.value : '未知'
      // const obj = EmployeeEnum.hireType.find((item) => item.id === cellValue)
      // return obj ? obj.value : '未知'
    }, // 删除员工
    delUserItem(id) {
      // 判断 是否有删除权限
      if (this.rolesBtn('USER_DEL')) {
        // 有去哪先
      } else {
        this.$message.error('您没有权限删除')
        return
      }
      this.$confirm('确定要删除该员工?', '温馨提示')
        .then(async () => {
          await delEmployee(id)
          // 判断删除的是不是当页最后一条数据
          if (this.list.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('删除成功')
          this.getUserList() // 重新请求渲染
        })
        .catch(() => {
          console.log('取消')
        })
    }, // 新增员工
    addUser() {
      this.showDialog = true
      // this.$refs.add.getDepartments()
    }, // 导出execl 表格
    async handleDownload() {
      console.log(this.total)
      const {
        data: { rows }
      } = await getEmployeeListApi(1, this.total)
      const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

      const merges = ['A1:A2', 'B1:F1', 'G1:G2']
      const headersArr = [
        '姓名',
        '手机号',
        '入职日期',
        '聘用形式',
        '转正日期',
        '工号',
        '部门'
      ]
      const headersRelations = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      const excelData = this.formatFn(rows, headersArr, headersRelations)
      // 包太大了 用按需导入懒加载
      import('@/vendor/Export2Excel').then((excel) => {
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // const data = [
        //   ['张三', '男', '18'],
        //   ['李四', '女', '16']
        // ]
        excel.export_json_to_excel({
          header: headersArr, // 表格的标头
          data: excelData, // 数据
          filename: '员工统计表', // 导出exel的文件名
          autoWidth: this.autoWidth, // 根据表格内容自适应宽度
          bookType: 'xlsx', // 导出文件的格式类型
          multiHeader, // 多表头配置
          merges // 要合并表格的位置
        })
      })
    }, // 把后台返回来的员列表转换成二维数组
    formatFn(rows, headersArr, headersRelations) {
      // const arr = [[], []]
      const arr = []
      rows.forEach((key, index) => {
        const itemarr = []
        headersArr.forEach((key, ind) => {
          // Y英文的键
          const englishKey = headersRelations[key]

          const { hireType } = obj
          // 格式 是否正式员工
          if (englishKey === 'formOfEmployment') {
            const obj = hireType.find(
              (item) =>
                // 比较是否有 1或者2
                item.id === +rows[index][englishKey]
            )

            // 格式好的数据复制给当前的值
            rows[index][englishKey] = obj ? obj.value : '未知'
          }
          // 判断 日期是否存在当前里面
          if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
            rows[index][englishKey] = formatTime(
              rows[index][englishKey],
              'YYYY年MM月DD日'
            )
          }
          itemarr.push(rows[index][englishKey])
        })

        arr.push(itemarr)
      })
      return arr
    }, // 点击员工头像 打开弹层展现二维码
    showDialogCodeFn(value) {
      if (value) {
        this.showDialogCode = true
        //  QRCode.toCanvas(参数1，参数2)  参数1 dom元素  参数2 URL地址
        // dom的更新是异步的
        this.$nextTick(() => {
          QRCode.toCanvas(this.$refs.myCanvas, value)
        })
      } else {
        this.$message.error('用户还未上传头像')
      }
    }, // 打开分配权限弹层
    RoleshowDialog(id) {
      this.userId = id
      this.showRoleDialog = true
    }
  }
}
</script>
<style lang="scss">
.staffPhoto {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 10px;
}
</style>
